<template>
 <div class="page">
   <headerTItle :CNtitle="`本届展品`" :ENtitle="`EXHIBIT`"></headerTItle>
   <div class="searchForm">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item >
          <el-select v-model="formInline.tags_name" multiple collapse-tags :multiple-limit="3" placeholder="展品标签">
            <el-option
              v-for="item in storeTags"
              :key="item.id"
              :label="item.tag_name"
              :value="item.tag_name">
            </el-option>
          </el-select>
        </el-form-item>
       <el-form-item >
          <el-input v-model="formInline.goods_name" placeholder="展品名称"></el-input>
        </el-form-item>
       <el-form-item>
          <el-input v-model="formInline.booth_no" placeholder="展位号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="oneBox">
      <div class="one" v-for="item in storeExhibitList" :key="item.id" @click="handleClick(item)">
        <div class="qrcode">
          <img :src="item.goods_img" alt="">
        </div>
        <div class="text">
          <p class="companyName">{{item.goods_name}}</p>
          <p class="productName">{{item.company_name}}</p>
          <p class="boothNo">展位号：{{item.booth_no}}</p>
        </div>
      </div>
    </div>
     <div class="pageination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>
 </div>
</template>

<script>
import { getStoreGoodsList,getExhibits,getStoreGoodTags } from '@/api/index'  
import headerTItle from "@/components/headerTItle.vue";
export default {
  components: {
    headerTItle,
  },
  data() {
    return {
      formInline: {
        code: 'fb',
        exhibit_id: '',
        tags_name: '',
        company_name: '',
        booth_no: '',
        page: 1,
      },
      storeExhibitList: [],
      storeTags: [],
    };
  },
  async created(){
    if(this.$route.query.id){
      this.formInline.exhibit_id = this.$route.query.id
    }else{
      await getExhibits({code: 'fb'}).then(res => {
        this.formInline.exhibit_id = res.data[0].exhibit_id
      })
    }
    await getStoreGoodTags({code: 'fb'}).then(res => {
      this.storeTags = res.data
    })
    await getStoreGoodsList(this.formInline).then(res => {
      this.storeExhibitList = res.data.data
    })
  },
  methods: {
    onSubmit() {
      getStoreGoodsList(this.formInline).then(res => {
        this.storeExhibitList = res.data.data
      })
    },
    handleClick(item){
      this.$router.push({
        path: '/journal/productInfo',
        query: {
          id: item.id,
        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
.page {
  width: 100%;
}
.searchForm{
  padding: 2rem 15rem 0;
  box-sizing: border-box;
}
.oneBox {
  padding: 2rem 15rem;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(5, 16.25rem);
  grid-gap:3.125rem 2.1875rem ;
}
.one {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  .qrcode {
    width: 12.125rem;
    height: 12.125rem;
    img {
      width: 100%;
      height: 100%;
      display: flex;
    }
  }
  .text {
    color: #000;
    .companyName{
      font-size: 1.125rem;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: bold;
      text-align: center;
      margin:1rem 0 0 0

    }
    .boothNo,.productName{
      text-align: center;
      font-size: .875rem;
      color: #6D7278;
      margin: .25rem 0 0 0
    }
  }
}
  .pageination{
    display: flex;
    margin: 2.8125rem 0;
    box-sizing: border-box;
    padding: 0 15rem;
    justify-content: center;
  }
</style>
